<!DOCTYPE html>
<html lang="en">
  <head>
    <title>tab</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .on {
        background: #f40;
        color: white;
      }

      .box > div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="box" class="box">
      <button type="button">111</button>
      <button type="button">222</button>
      <button type="button">333</button>
      <div style="display: block">111</div>
      <div>222</div>
      <div>333</div>
    </div>
    <div id="box1" class="box">
      <button type="button">111</button>
      <button type="button">222</button>
      <button type="button">333</button>
      <div style="display: block">111</div>
      <div>222</div>
      <div>333</div>
    </div>
    <script>
      class Tab {
        constructor(id) {
          this.box = document.querySelector(id)
          this.buttonList = this.box.querySelectorAll('button')
          this.divList = this.box.querySelectorAll('div')
          this.init()
        }
        init() {
          this.buttonList[0].classList.add('on')
          for (let i = 0; i < this.buttonList.length; i++) {
            this.buttonList[i].onclick = function() {
              this.hide()
              this.show(i)
            }.bind(this)
          }
        }
        hide() {
          for (let i = 0; i < this.buttonList.length; i++) {
            this.buttonList[i].classList.remove('on')
            this.divList[i].style.display = 'none'
          }
        }
        show(index) {
          this.buttonList[index].classList.add('on')
          this.divList[index].style.display = 'block'
        }
      }

      window.onload = function() {
        new Tab('#box')
        // 通过继承让box2也可以使用
        class Atab extends Tab {
          next() {}
        }
        new Atab('#box1')
      }
    </script>
  </body>
</html>
